<template>
	<div>
		<div class="head_part">
			<el-page-header @back="goBack">
				<template #content>
					<span class="text-large font-600 mr-3"> 搜索历史 </span>
				</template>
			</el-page-header>
		</div>
		<div class="action_part">
			<el-button>清除历史记录</el-button>
			<el-button>删除</el-button>
			<div style="margin-left: 20px">
				<el-input placeholder="请输入想要搜索的内容" v-model="searchValue">
                    <template #append>
                        <el-button :icon="Search" />
                    </template>
                </el-input>
			</div>
		</div>
		<div class="table_part">
			<el-table :data="list" style="height: 70vh">
				<el-table-column type="selection"></el-table-column>
				<el-table-column label="日期"></el-table-column>
				<el-table-column label="搜索标签"></el-table-column>
				<el-table-column label="搜索内容"></el-table-column>
				<el-table-column label="操作"></el-table-column>
			</el-table>
		</div>
		<div class="page_part">
			<AplidPaginate :total="total" :current="current" :size="size" @change="pageChange"></AplidPaginate>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import AplidPaginate from '@/components/AplidCrud/src/AplidPaginate/index'

let emit = defineEmits(['back'])

let searchValue = ref('')
let total = ref(0)
let current = ref(1)
let size = ref(10)
let list = ref([])

const pageChange = (data) => {
	console.log('fdf', data)
}
const goBack = () => {
	emit('back')
}
</script>
<style scoped lang="scss">
.head_part{
    margin-bottom:20px;
}
.action_part {
	width: 80%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}
.page_part {
	margin: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
</style>
